<template>
	<div class="head">

		<div class="sreePublic">
			<div id="" style="text-align: center;">
				<em class="iconfont" @click="vfun_back">&#xe61f;</em>
			</div>
			{{vue_title}}
			<div class="title-em" @click="vue_layout=!vue_layout">
				<em class="iconfont" v-if="!vue_layout">&#xe686;</em>
				<em class="iconfont" v-else>&#xe687;</em>
			</div>
		</div>
		<!--<div class="sree">

  		<div class="logo"><em class="iconfont" @click="vfun_back">&#xe61f;</em></div>
	    <div class="sreinput" style="text-align: center;">{{vue_title}}</div>

  	</div>-->
		<div class="good-section">
			<div class="good-sort">
				<div :class="{active:vue_sort}" @click="vfun_sort">
					时间<em class="iconfont" :class="{activem:vue_paixu}">&#xe610;</em>
				</div>
				<div :class="{active:vue_sort2}" @click="vfun_sort2">
					规格
				</div>
				<div :class="{active:vue_sort3}" @click="vfun_sort3">
					价格<em class="iconfont" :class="{activem:vue_paixu3}">&#xe610;</em>
				</div>
			</div>
			<div class="good-list" :class="{layout:!vue_layout}">
				<ul>
					<li v-for="(item,index) in SaleGoodsSet.list">
						<div class="lidiv">
							<div class="good-img">
								<img :src="item.goodsBigPic" v-if="SaleGoodsSet.list[index].goodsBigPic!=''" @click="vfun_go(index,SaleGoodsSet.list)" />
								<img src="../../../static/noImg.png" v-else @click="vfun_go(index,SaleGoodsSet.list)" />
							</div>
							<div class="good-oter">
								<p @click="vfun_go(index,SaleGoodsSet.list)">{{item.goodsName}}</p>
								<span>￥{{Public.formatMoney(item.goodsSalePrice,2)}}</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'hello',
		data() {
			return {
				vue_paixu: false,
				vue_paixu2: false,
				vue_paixu3: false,

				vue_title: '',
				vue_sort: false,
				vue_sort2: false,
				vue_sort3: false,
				//    vue_sort4:false,
				vue_layout: true,
				SaleGoodsSet: {
					"list": [],
					"fullTextFilterStr": "",
				},
				orderStr: '',
				orderdecs: true,
			}
		},
		methods: {
			vfun_sort() {
				this.vue_sort = true;
				this.vue_sort2 = false;
				this.vue_sort3 = false;
				this.vue_paixu = !this.vue_paixu;
				this.vue_paixu2 = false;
				this.vue_paixu3 = false;
				this.orderdecs = !this.orderdecs;
				if(this.orderdecs) {
					this.orderStr = 'createDate' + ' desc';
				} else {
					this.orderStr = 'createDate';
				}

				this.queryByPage();
			},
			vfun_sort2() {
				this.vue_sort = false;
				this.vue_sort2 = true;
				this.vue_sort3 = false;
				this.vue_paixu2 = !this.vue_paixu2;
				this.vue_paixu3 = false;
				this.vue_paixu = false;

				this.orderdecs = !this.orderdecs;
				if(this.orderdecs) {
					this.orderStr = 'goodsSkuValue' + ' desc';
				} else {
					this.orderStr = 'goodsSkuValue';
				}

				this.queryByPage();
			},
			vfun_sort3() {
				this.vue_sort = false;
				this.vue_sort2 = false;
				this.vue_sort3 = true;
				this.vue_paixu3 = !this.vue_paixu3;
				this.vue_paixu2 = false;
				this.vue_paixu = false;

				this.orderdecs = !this.orderdecs;
				if(this.orderdecs) {
					this.orderStr = 'goodsSalePrice' + ' desc';
				} else {
					this.orderStr = 'goodsSalePrice';
				}

				this.queryByPage();
			},

			vfun_go(index, obj) {
				localStorage.setItem("goodsCode", obj[index].goodsCode);

				this.$router.push({path:"/goodsDetails"})
			},
			vfun_back() {
				history.back();
			},
			vfun_sre() {
				localStorage.removeItem("goodsTags"),
					localStorage.removeItem("vue_guanjin"),
					this.queryByPage();
			},
			queryByPage() {
				this.axios({
					method: 'POST',
					url: "/v3/sale/goodss/list",
					data: {
						"fullTextFilterStr": this.SaleGoodsSet.fullTextFilterStr,
						"goodsTags": localStorage.getItem("goodsTags"),
						"orderStr": this.orderStr,
					}
				}).then((res) => {
					this.SaleGoodsSet.list = res.data.list;
				}).catch((err) => {

				});
			},
		},
		activated() {
			if(localStorage.getItem("goodsTags") == "00100000095") {
				this.vue_title = "新品上架"
			}
			if(localStorage.getItem("goodsTags") == "00100000096") {
				this.vue_title = "热卖推荐"
			}
			if(localStorage.getItem("goodsTags") == "00100000097") {
				this.vue_title = "清仓优惠"
			}
			if(localStorage.getItem("goodsTags") == "000") {
				this.vue_title = "促销商品"
			}
			if(localStorage.getItem("goodsTags") == '') {
				this.vue_title = "商品列表"
			}
			//		this.vue_title=localStorage.getItem("goodsTags");
			this.SaleGoodsSet.fullTextFilterStr = localStorage.getItem("vue_guanjin");
			if(localStorage.getItem("vue_guanjin")) {
				this.vue_title = localStorage.getItem("vue_guanjin");
			}

			//		if(localStorage.getItem("goodsTags")==''){
			//			this.vue_title="商品列表"
			//		}
			this.queryByPage();
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h1,
	h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	a {}

	.head {}

	.sree {
		width: 100%;
		height: 1.2rem;
		background: url(../../assets/img/bg.jpg);
		background-size: auto 100%;
		color: #fff;
		z-index: 100;
		border-bottom: 1px solid #bfbfbf;
		position: fixed;
		top: 0;
		width: 100%;
		display: -webkit-box;
		text-align: center;
	}

	.sree .sreinput {
		line-height: 0.8rem;
		-webkit-box-flex: 1;
		height: 0.8rem;
		display: -webkit-box;
		text-align: center!important;
		color: #333;
	}

	.sree div {
		margin-top: 0.2rem;
	}

	.sree div em {
		display: block;
		color: #666;
		font-size: 25px;
		margin-left: 0.2rem;
		line-height: 0.98rem;
	}

	.logo {
		padding: 0 1%;
		line-height: 0.8rem;
	}

	.land {
		position: absolute;
		right: 1rem;
		top: 0rem;
	}

	.land em {
		font-size: 22px!important;
	}

	.good-section {
		margin-top: 1.2rem;
	}

	.good-sort {
		display: -webkit-box;
		height: 1rem;
		border-bottom: 1px solid #bfbfbf;
	}

	.good-sort em {
		position: relative;
		top: 0px;
		color: #232326;
		font-size: 20px;
		position: relative;
		top: 0.05rem;
	}

	.good-sort div {
		-webkit-box-flex: 1;
		text-align: center;
		font-size: 15px;
		line-height: 1rem;
	}

	.active {
		color: #D50B0A;
	}

	.active em {
		color: #D50B0A!important;
	}

	.activem {
		display: inline-block;
		transform: rotate(180deg);
		position: relative;
		top: -0.03rem!important;
	}

	.good-img {
		float: left;
	}

	.good-list img {
		width: 2.5rem!important;
		height: 2.5rem!important;
	}

	.good-oter {
		float: left;
		font-size: 14px;
		position: relative;
		box-sizing: border-box;
		padding-left: 0.3rem;
	}

	.good-oter span {
		position: absolute;
		color: #D50B0A;
		font-size: 14px;
		top: 1.8rem;
	}

	.good-oter p {
		width: 6.5rem;
		height: 1.1rem;
		font-size: 15px;
		overflow: hidden;
	}

	.good-list {}

	.good-list li {
		margin: 0 2.5%;
		padding: 0.2rem 0;
		width: 95%;
		border-bottom: 1px solid #bfbfbf;
		overflow: hidden;
	}

	.layout {
		width: 100%;
		overflow: hidden;
	}

	.layout ul {
		width: calc(100% + 0.3rem);
		overflow: hidden;
	}

	.layout li {
		margin: 0!important;
		width: 50%!important;
		box-sizing: border-box!important;
		float: left!important;
		border: 0;
		padding: 0.15rem 0.15rem 0rem 0rem!important;
		background: #e0e0e0!important;
	}

	.layout li .lidiv {
		background: #fff;
		padding-top: 0.15rem;
	}

	.layout li img {
		margin: 0.15rem auto!important;
		width: 92%!important;
		height: 4.2rem!important;
	}

	.layout li div {
		float: none!important;
	}

	.layout li div span {
		position: initial;
	}

	.layout .good-oter p {
		width: auto;
		height: auto;
		text-overflow: ellipsis!important;
		white-space: nowrap!important;
	}
</style>
